<script>
import {saveToken} from "@/store/token";

export default {
  name: "restPassword",
  data() {
    let validateAccount = (rules, value, callback) => {
      if (/[\u4E00-\u9FA5]/g.test(value)) {
        callback(new Error('账户名称不能输入汉字!'));
      } else if (/^[0-9]+$/g.test(value)) {
        callback(new Error('账户名称不能输入纯数字!'));
      } else {
        callback();
      }

    }
    let validateConfirmPass = (rule, value, callback) => {
      if (value !== this.forgotPasswordForm.password) {
        callback(new Error('两次输入密码不一致,请重新输入'));
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      const regUser = /^([a-zA-Z0-9]+[-_]?)+@[a-zA-Z0-9]+\.[a-z]+$/
      if (regUser.test(value)) {
        return callback();
      }
      //console.log(value)
      if (value === undefined || value.length === 0) {
        callback(new Error('邮箱不能为空'));
      } else {
        callback(new Error('邮箱验证不合法'));
      }
    };
    return {
      active: 0,
      codeShow: true,
      count: '',
      timer: null,
      //用户信息
      verificationForm: {
        user: '',
        userEmail: "",
        code: ""
      },
      forgotPasswordForm: {
        password: '',
        newPassword: '',
        user: ''
      },
      //账号确认规则
      verificationFormRules: {
        userEmail: [{validator: checkEmail, trigger: 'blur'}],
        user: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 1, max: 15, message: '用户名不超过15个字符,请重新输入', trigger: "blur"},
          {validator: validateAccount, trigger: 'blur'}
        ],
      },
      forgotPasswordFormRules: {
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 16, message: '长度在3-16位之间', trigger: "blur"},
          //{pattern: new RegExp("^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,16}$") , message: '密码为6-16位大小写字母+数字组合，请重新输入',trigger: "blur" }
        ],
        newPassword: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
          {validator: validateConfirmPass, trigger: 'blur'},
          {min: 3, max: 16, message: '长度在3-16位之间', trigger: "blur"},
          //{pattern: new RegExp("^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,16}$") , message: '密码为6-16位大小写字母+数字组合，请重新输入',trigger: "blur" }
        ],
      }

    }
  },
  methods: {
    resetPassword() {
      this.$refs.forgotPasswordForm.validate(valid => {
        if (valid) {
          this.$api.user.restPassword(
              this.forgotPasswordForm.user,
              this.forgotPasswordForm.password
          ).then(res => {
            if (res.data.success) {
              this.active++
            } else {
              this.$message.error("后台出错了，稍后再试")
            }
          })
        }
      })
    },
    getEmailCode(formName) {  //获取验证码
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var Reg = /^([a-zA-Z0-9]+[-_]?)+@[a-zA-Z0-9]+\.[a-z]+$/
          // 正则验证
          if (Reg.test(this.verificationForm.userEmail)) {

            this.$api.user.emailCode(
                this.verificationForm.user,
                this.verificationForm.userEmail,
                "1"
            ).then(res => {
              if (res.data.success) {
                this.$message.info('验证码邮件已经发送');
              } else {
                this.$message.error(res.data.message);
              }
              const TIME_COUNT = 60;
              if (!this.timer) {
                this.count = TIME_COUNT;
                this.codeShow = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.codeShow = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                }, 1000)
              }
            })
          } else {
            this.$message.info('邮箱格式不正确');
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    submitEmail(formName) {  //提交
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var Reg = /^([a-zA-Z0-9]+[-_]?)+@[a-zA-Z0-9]+\.[a-z]+$/
          // 正则验证与验证码
          if (Reg.test(this.verificationForm.userEmail) && this.verificationForm.code) {
            this.$api.user.updateEmail(
                this.verificationForm.user,
                this.verificationForm.userEmail,
                this.verificationForm.code,
                "1"
            ).then(res => {
              if (res.data.success) {
                this.$message.info('成功');
                this.forgotPasswordForm.user = this.verificationForm.user
                this.active++
                this.$refs[formName].resetFields();
              } else {
                this.$message.error(res.data.message ? "服务器原因，验证失败" : res.data.message);
              }
            })
          } else {
            this.$message.error('验证码未输入');
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    mounted() {

    },
  }
}
</script>

<template>
  <div class="page-container">
    <div>
      <div class="title-img-wr">
        <!--<img src="../../assets/images/login/title.png" alt="">-->
      </div>
      <div class="forgot-password">
        <button type="text" v-show="active>='1'" class="return-page-wr" @click="$router.go(-1)"><i
            class="el-icon-arrow-left"></i> 上一步
        </button>
        <button type="text" v-show="active==='0'" class="return-page-wr" @click="$router.push({path:'/login'})"><i
            class="el-icon-arrow-left"></i> 返回
        </button>
        <div class="content">
          <el-steps :active="active" finish-status="success">
            <el-step title="账号验证"></el-step>
            <el-step title="重置密码"></el-step>
            <el-step title="完成设置"></el-step>
          </el-steps>
          <div v-if="active===0">
            <!--账号验证-->
            <el-form ref="verificationForm" :model="verificationForm" :rules="verificationFormRules"
                     class="demo-ruleForm" @submit.native.prevent>
              <el-form-item prop="user" label="用户名">
                <el-input v-model="verificationForm.user" type="text" placeholder="用户名"/>
              </el-form-item>
              <el-form-item prop="userEmail" label="账户邮箱">
                <el-input v-model="verificationForm.userEmail" type="text" placeholder="邮箱"/>
              </el-form-item>
              <el-form-item label="验证码">
                <el-input style="width: 200px;" v-model="verificationForm.code" placeholder="邮箱验证码"/>
                <span v-if="codeShow" style="color:red;margin-left: 10px;cursor: pointer;"
                      @click="getEmailCode('verificationForm')">获取验证码</span>
                <!-- 倒计时 -->
                <span v-if="!codeShow" style="margin-left: 10px;" class="count">{{ count }}秒后重试</span>
              </el-form-item>
            </el-form>
            <!--            <el-button style="margin-top: 12px;" @click="checkSecurityQuestion">下一步</el-button>-->
            <div class="btn-wr">
              <button type="button" class="login-btn" @click.prevent="submitEmail('verificationForm')">下一步 <i
                  class="el-icon-arrow-right"></i></button>
            </div>
          </div>
          <div v-if="active===1">
            <el-form ref="forgotPasswordForm" :model="forgotPasswordForm" :rules="forgotPasswordFormRules"
                     class="demo-ruleForm" @submit.native.prevent>
              <el-form-item prop="password" label="密码:">
                <el-input v-model="forgotPasswordForm.password" type="password" placeholder="请输入密码"
                          auto-complete="off">
                </el-input>
              </el-form-item>
              <el-form-item prop="newPassword" label="确认密码:">
                <el-input v-model="forgotPasswordForm.newPassword" placeholder="重复密码" type="password">
                </el-input>
              </el-form-item>
            </el-form>
            <div class="btn-wr">
              <button type="button" class="login-btn" @click.prevent="resetPassword">确认 <i
                  class="el-icon-arrow-right"></i></button>
            </div>
          </div>
          <div v-if="active===2">
            <div class="reset-success">
              <!--<img src="../index/assets/images/success.png" alt="">-->
              <p class="set-success">设置成功，去登录</p>
            </div>
            <div class="btn-wr">
              <button type="button" class="login-btn" @click="$router.push({path:'/login'})">登录 <i
                  class="el-icon-arrow-right"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow-y: auto;

  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .wid {
    width: 100%;
  }

  .title-img-wr {
    text-align: center;
  }

  .forgot-password {
    .return-page-wr {
      position: relative;
      top: 30px;
      left: 30px;
      color: #e5525b;
      font-size: 16px;
      margin-bottom: 15px;

      i {
        font-size: 20px;
        vertical-align: middle;
      }
    }

    width: 580px;
    height: 540px;
    background: #FFFFFF;
    border-radius: 6px;

    .content {
      padding: 30px 90px;
      box-sizing: border-box;
    }

    /deep/ .el-step.is-horizontal {
      .el-step__line {
        height: 2px;
        top: 20px;
        left: 48px;
        right: 10px;
      }
    }

    /deep/ .el-step__icon {
      width: 42px;
      height: 42px;
      color: #e6545a;
      font-size: 18px;
      border: 2px solid #e6545a;
    }

    /deep/ .el-step__line {
      background: #e6545a;
    }

    /deep/ .is-process {
      .el-step__icon {
        background: #e6545a;
        color: #FFFFFF;
        border: 0px;

      }
    }

    /deep/ .el-step__head {
      margin-bottom: 20px;
    }

    /deep/ .el-step__title.is-process {
      color: #e6545a;
    }


    /deep/ .el-form-item__label {
      width: 100%;
      text-align: left;
    }

    /deep/ .el-form-item__content {
      display: inline-block;
      width: 100%;
      margin-left: 0px;
    }
  }

  .btn-wr {
    text-align: center;
  }

  .reset-success {
    text-align: center;
    margin: 60px 0;
  }

  .set-success {
    margin-top: 20px;
    font-weight: 600;
  }

  .login-btn {
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0 auto;
    background: #e6545a;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    border-radius: 4px;

    i {
      right: -50px;
      font-size: 27px;
      position: relative;
      vertical-align: middle;
    }
  }
}

</style>
